<template>
  <div class="container">
    <a-layout>
      <a-layout-header :style="headerStyle">
        <Header></Header>
      </a-layout-header>
      <a-layout v-if="store.headerActive == headerItems.console" >
        <a-layout-sider collapsible  :style="siderStyle">
          <Nav></Nav>
        </a-layout-sider>
        <a-layout-content :style="contentStyle">
          <Content></Content>
        </a-layout-content>
      </a-layout>
      <a-layout v-else-if="store.headerActive == headerItems.ssh" >
        <a-layout-sider collapsible  :style="siderStyle">Left</a-layout-sider>
        <a-layout-content :style="contentStyle">Content</a-layout-content>
        <a-layout-sider collapsible  :style="siderStyle">Right</a-layout-sider>
      </a-layout>
    </a-layout>

  </div>

</template>
<script setup>
import Header from '@/views/header/Index.vue';
import Nav from '@/views/main/Nav.vue';

import store from '@/store.js';
import Content from "@/views/main/Content.vue";
const headerItems = {
  console: 0,
  ssh: 1,
}

const headerStyle = {
  // textAlign: 'center',
  color: '#fff',
  height: '32px',
  // paddingInline: 50,
  lineHeight: '32px',
  backgroundColor: '#7dbcea',
};
const contentStyle = {
  textAlign: 'center',
  minHeight: 120,
  lineHeight: '120px',
  color: '#fff',
  backgroundColor: '#108ee9',
};
const siderStyle = {
  textAlign: 'center',
  lineHeight: '120px',
  color: '#fff',
  backgroundColor: '#3ba0e9',
};
const footerStyle = {
  textAlign: 'center',
  color: '#fff',
  backgroundColor: '#7dbcea',
};
</script>

<style scoped>
.container {
  width: 100%;
  height: 100%;
  background: #ddd;
}
</style>